<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>分析页</title>	
		<style type="text/css">		  
			.box{
				width: 100%;
				height: 1200px;
			}
			.tou{
				width: 100%;
				height: 80px;
			background-color: white;
			}
			#heard{
				margin-top: 10px;
				background-color: whitesmoke;
			/* padding-top: 20px; */
				display: flex;
				justify-content: center;
				/* position: absolute; */
				width: 100%;
				height: 280px;
				
			}
			li img{
				border-radius: 24px;
			}
		#one,#two,#three,#four{
			margin: 60px;
			  display: inline-block;
		}
			#one{
background-color: whitesmoke;
				    width: 230px;
			  height: 200px;
			}
			#two{
			background-color: #whitesmoke;						
				width: 230px;
				height: 200px;
			
			}#three{
					
				background-color: whitesmoke;
				    width: 230px;
			  height: 200px;	
			}
			#four{
			background-color: whitesmoke;
				    width: 230px;
				     height: 200px;
			}
			p{
				font-size: 14px;
				color: rgba(0, 0, 0, 0.85);
				line-height: 160%;
				
			}	
			h2{
				margin-left:10px ;
				text-align: left
			}
			h4{
				margin-left:10px ;
				text-align: left;
			}
			#pro{
				
				margin-left:10px ;
			}

	.icon{
		width: 24px;
		    height: 24px;
		    left: 32px;
		    top: 20px;
		line-height: 10px;
		margin: 10px;
	}
	
	.ultest li{
	list-style: none;
	float: left;
	margin-left: 30px;
	}
	canvas{
		background-color: whitesmoke;
	}

		</style>
<link href="/path/to/c3.css" rel="stylesheet">
	<script src="js/echarts.min.js"></script>
	</head>
	<body>
		<div class="box">
			<div class="tou">
			
			<div class="icon">
				<span>——</span>
				<span>——</span>
				<span>——</span>
					</div>
				<div class="ultest">
						<ul>
							<!-- <li><img src="img/btn_search_box.gif" style="background-color:rgba(255,255,255,6)  #333333;"/></li> -->
							<li><img src="img/lingdang.jpg" style="width: 24px; height: 24px;"></li>
							<li><img src="img/img257165cbadaae8.png" style="width:24px; height: 24px;"/></li>
						</ul>
				</div>
			
			</div>
			<div id="heard">
			<div id="one">
				<h4>总销售额</h4>
				<h2>￥126,560</h2>
				<p>周同比&nbsp;12%&nbsp;&nbsp;&nbsp;日环比&nbsp;11%</p>
				<hr width="203px" />
				<p>日均销售额&nbsp;￥12,243</p>
			</div>			
			<div id="two" style="width:230px; height: 200px;">
			</div>
			<div id="three">
			</div>
			<div id="four">
				<h4>线上购物转化率</h4>
				<h2>78%</h2>
				   <progress value="78" max="100" id="pro"></progress>
				   <hr width="203px" />
					<p>周同比&nbsp;12%&nbsp;&nbsp;&nbsp;日环比&nbsp;11%</p>
			</div>
			</div>
		<!-- 	<div id="" style=""> -->
				  <div class="row">
				    <div id="main" style="width:950px;height:350px;float: left;margin-left: 90px;">
					</div>
				    <div class="col-sm" style="float: right;line-height: 3;width: 300px;height: 300px;">
				 <ol>
				 	<li>工专路一号店</li>
				 	<li>工专路一号店</li>
				 	<li>工专路一号店</li>
				 	<li>工专路一号店</li>
				 	<li>工专路一号店</li>
				 	<li>工专路一号店</li>	
				 </ol>
				    </div>
				   </div>
				   
				
				   <div id="left" style="height: 308px; width: 277px; margin-top:370px; margin-left: 1200px;" >	  					   
				   </div>		   
				   <div id="right" style="height: 308px; width: 277px;position: absolute;top: 750px;left: 150px;" >
				   					   
				   </div>
				   <div id="right1" style="height: 308px; width: 277px;position: absolute;top: 750px;left: 650px;" >
				   					   
				   </div>
				   
				   <div id="admin" style="width:100%;height:350px;float: right;margin-left: 90px; top: 0;">  
				   </div>
			</div>
</div>
<script type="text/javascript">
	
	var myChart = echarts.init(document.getElementById('right'));
	
	
	var xAxisData = [];
	var data1 = [];
	var data2 = [];
	for (var i = 0; i < 100; i++) {
	    xAxisData.push('类目' + i);
	    data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
	    data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
	}
	
	option = {
	    title: {
	        text: '搜索用户数'
	    },
	    legend: {
	        data: ['bar', 'bar2']
	    },
	    toolbox: {
	        // y: 'bottom',
	        feature: {
	            magicType: {
	                type: ['stack', 'tiled']
	            },
	            dataView: {},
	            saveAsImage: {
	                pixelRatio: 2
	            }
	        }
	    },
	    tooltip: {},
	    xAxis: {
	        data: xAxisData,
	        splitLine: {
	            show: false
	        }
	    },
	    yAxis: {
	    },
	    series: [{
	        name: 'bar',
	        type: 'bar',
	        data: data1,
	        animationDelay: function (idx) {
	            return idx * 10;
	        }
	    }, {
	        name: 'bar2',
	        type: 'bar',
	        data: data2,
	        animationDelay: function (idx) {
	            return idx * 10 + 100;
	        }
	    }],
	    animationEasing: 'elasticOut',
	    animationDelayUpdate: function (idx) {
	        return idx * 5;
	    }
	};
	myChart.setOption(option);
</script>
<script type="text/javascript">
	
	var myChart = echarts.init(document.getElementById('right1'));
	
	
	var xAxisData = [];
	var data1 = [];
	var data2 = [];
	for (var i = 0; i < 100; i++) {
	    xAxisData.push('类目' + i);
	    data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
	    data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
	}
	
	option = {
	    title: {
	        text: '人均搜索次数'
	    },
	    legend: {
	        data: ['bar', 'bar2']
	    },
	    toolbox: {
	        // y: 'bottom',
	        feature: {
	            magicType: {
	                type: ['stack', 'tiled']
	            },
	            dataView: {},
	            saveAsImage: {
	                pixelRatio: 2
	            }
	        }
	    },
	    tooltip: {},
	    xAxis: {
	        data: xAxisData,
	        splitLine: {
	            show: false
	        }
	    },
	    yAxis: {
	    },
	    series: [{
	        name: 'bar',
	        type: 'bar',
	        data: data1,
	        animationDelay: function (idx) {
	            return idx * 10;
	        }
	    }, {
	        name: 'bar2',
	        type: 'bar',
	        data: data2,
	        animationDelay: function (idx) {
	            return idx * 10 + 100;
	        }
	    }],
	    animationEasing: 'elasticOut',
	    animationDelayUpdate: function (idx) {
	        return idx * 5;
	    }
	};
	myChart.setOption(option);
</script>
<script type="text/javascript">
	
	var myChart = echarts.init(document.getElementById('left'));
		option = {
		    tooltip: {
		        trigger: 'item',
		        formatter: '{a} <br/>{b}: {c} ({d}%)'
		    },
		    legend: {
		        orient: 'vertical',
		        left: 10,
		        data: ['家用电器', '食用酒水', '个人健康', '服饰箱包', '其他']
		    },
		    series: [
		        {
		            name: '访问来源',
		            type: 'pie',
		            radius: ['50%', '70%'],
		            avoidLabelOverlap: false,
		            label: {
		                show: false,
		                position: 'center'
		            },
		            emphasis: {
		                label: {
		                    show: true,
		                    fontSize: '30',
		                    fontWeight: 'bold'
		                }
		            },
		            labelLine: {
		                show: false
		            },
		            data: [
		                {value: 335, name: '家用电器'},
		                {value: 310, name: '食用酒水'},
		                {value: 234, name: '个人健康'},
		                {value: 135, name: '服饰箱包'},
		                {value: 1548, name: '其他'}
		            ]
		        }
		    ]
		};

		myChart.setOption(option);
</script>

<script type="text/javascript">
		 var myChart = echarts.init(document.getElementById('three'));
	var dataAxis = ['', '', '', '', '', ''];
	var data = [20, 82, 91, 234, 290, 330];
	var yMax = 500;
	var dataShadow = [];
	
	for (var i = 0; i < data.length; i++) {
	    dataShadow.push(yMax);
	}
	option = {
	    title: {
	        text: '支付笔数',
	        subtext: ''
	    },
	    xAxis: {
	        data: dataAxis,
	        axisLabel: {
	            inside: true,
	            textStyle: {
	                color: '#fff'
	            }
	        },
	        axisTick: {
	            show: false
	        },
	        axisLine: {
	            show: false
	        },
	        z: 10
	    },
	    yAxis: {
	        axisLine: {
	            show: false
	        },
	        axisTick: {
	            show: false
	        },
	        axisLabel: {
	            textStyle: {
	                color: '#999'
	            }
	        }
	    },
	    dataZoom: [
	        {
	            type: 'inside'
	        }
	    ],
	    series: [
	        { // For shadow
	            type: 'bar',
	            itemStyle: {
	                color: 'rgba(0,0,0,0.05)'
	            },
	            barGap: '-100%',
	            barCategoryGap: '40%',
	            data: dataShadow,
	            animation: false
	        },
	        {
	            type: 'bar',
	            itemStyle: {
	                color: new echarts.graphic.LinearGradient(
	                    0, 0, 0, 1,
	                    [
	                        {offset: 0, color: '#83bff6'},
	                        {offset: 0.5, color: '#188df0'},
	                        {offset: 1, color: '#188df0'}
	                    ]
	                )
	            },
	            emphasis: {
	                itemStyle: {
	                    color: new echarts.graphic.LinearGradient(
	                        0, 0, 0, 1,
	                        [
	                            {offset: 0, color: '#2378f7'},
	                            {offset: 0.7, color: '#2378f7'},
	                            {offset: 1, color: '#83bff6'}
	                        ]
	                    )
	                }
	            },
	            data: data
	        }
	    ]
	};
	
	// Enable data zoom when user click bar.
	var zoomSize = 6;
	myChart.on('click', function (params) {
	    console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
	    myChart.dispatchAction({
	        type: 'dataZoom',
	        startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
	        endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
	    });
	});
	
	myChart.setOption(option);
</script>

 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  	
	<script type="text/javascript">
				 var myChart = echarts.init(document.getElementById('two'));
	var	option = {
		title: {
		    text: '访问量',
		    subtext: ''
		},
		    xAxis: {
		        type: 'category',
		        boundaryGap: false
		    },
		    yAxis: {
		        type: 'value',
		        boundaryGap: [0, '30%']
		    },
		    visualMap: {
		        type: 'piecewise',
		        show: false,
		        dimension: 0,
		        seriesIndex: 0,
		        pieces: [{
		            gt: 1,
		            lt: 3,
		            color: 'rgba(0, 180, 0, 0.5)'
		        }, {
		            gt: 5,
		            lt: 7,
		            color: 'rgba(0, 180, 0, 0.5)'
		        }]
		    },
		    series: [
		        {
		            type: 'line',
		            smooth: 0.6,
		            symbol: 'none',
		            lineStyle: {
		                color: 'green',
		                width: 5
		            },
		            markLine: {
		                symbol: ['none', 'none'],
		                label: {show: false},
		                data: [
		                    {xAxis: 1},
		                    {xAxis: 3},
		                    {xAxis: 5},
		                    {xAxis: 7}
		                ]
		            },
		            areaStyle: {},
		            data: [
		                ['2019-10-10', 200],
		                ['2019-10-11', 400],
		                ['2019-10-12', 650],
		                ['2019-10-13', 500],
		                ['2019-10-14', 250],
		                ['2019-10-15', 300],
		                ['2019-10-16', 450],
		                ['2019-10-17', 300],
		                ['2019-10-18', 100]
		            ]
		        }
		    ]
		};

		  myChart.setOption(option);
	</script>
	<script type="text/javascript">
		 var myChart = echarts.init(document.getElementById('admin'));
var		option = {
		    title: {
		        text: '折线图堆叠'
		    },
		    tooltip: {
		        trigger: 'axis'
		    },
		    legend: {
		        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    toolbox: {
		        feature: {
		            saveAsImage: {}
		        }
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十一月','十二月']
		    },
		    yAxis: {
		        type: 'value'
		    },
		    series: [
		        {
		            name: '邮件营销',
		            type: 'line',
		            stack: '总量',
		            data: [120, 132, 101, 134, 90, 230, 210,110,120,130,140,150]
		        },
		        {
		            name: '联盟广告',
		            type: 'line',
		            stack: '总量',
		            data: [120, 132, 101, 134, 90, 230, 210,110,120,130,140,150]
		        },
		        {
		            name: '视频广告',
		            type: 'line',
		            stack: '总量',
		            data: [220, 132, 101, 134, 90, 230, 210,110,120,130,140,150]
		        },
		        {
		            name: '直接访问',
		            type: 'line',
		            stack: '总量',
		            data: [120, 132, 101, 134, 90, 230, 210,110,120,130,140,150]
		        },
		        {
		            name: '搜索引擎',
		            type: 'line',
		            stack: '总量',
		            data: [120, 132, 101, 134, 90, 230, 210,110,120,130,140,150]
		        }
		    ]
		};	
		   myChart.setOption(option);
	</script>
	
	<script type="text/javascript">
	    // 基于准备好的dom，初始化echarts实例
	    var myChart = echarts.init(document.getElementById('main'));
	    // 指定图表的配置项和数据
	    var option = {
	        title: {
	            text: '销售额趋势'
	        },
			
	        tooltip: {},
	        legend: {
	            data:['销量']
	        },
	        xAxis: {
	            data: ["1月","2月","3月","4月","5月","6月",'7月','8月','9月','10月','11月','12月']
	        },
	        yAxis: {},
	        series: [{
	            name: '销量',
	            type: 'bar',
	            data: [1115, 901, 1128, 1101, 422, 837,849,383,727,417,1151,480]
	        }]
	    };
	    myChart.setOption(option);
	</script>
	</body>
</html>
